<template>
  <!-- 账户管理 -->
  <div class="account-container">
    <PageCard
      title="查询条件"
      :showTitle="false"
    >
      <el-form
        :model="formData"
        label-position="right"
        size="small"
        :inline="true"
        ref="searchForm"
        label-width="100px"
      >
        <el-form-item prop="hospitalDepartId">
          <Treeselect
            class="w350"
            v-model="formData.hospitalDepartId"
            placeholder="请选择所属科室"
            :options="departmentList"
            :load-options="loadOptions"
            :defaultOptions="true"
            searchPromptText="请输入科室名称或者首字母拼音"
            :async="true"
            noResultsText="暂无数据"
          />
          <!-- <el-select
            class="w350"
            v-model="formData.hospitalDepartId"
            filterable
            placeholder="请选择所属科室"
          >
            <el-option
              v-for="item in departmentList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select> -->
        </el-form-item>
        <el-form-item prop="type">
          <el-select
            class="w350"
            v-model="formData.type"
            filterable
            placeholder="请选择预警类型"
          >
            <el-option
              v-for="item in alarmTypeList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="time">
          <el-date-picker
            value-format="yyyy-MM-dd"
            v-model="formData.time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="handleSearch(1, 10)"
          >查询</el-button>
          <el-button @click="handleReset()">重置</el-button>
        </el-form-item>
      </el-form>
    </PageCard>
    <PageCard
      title="预警记录列表"
      icon_type="list"
      :hasCreate="false"
      btnText="新增预警记录"
      @create="handleAdd()"
    >
      <PageTable
        :data="data"
        :currentPage="currentPage"
        :pageSize="pageSize"
        :total="total"
        @handleChange="handleSearch"
      >
        <el-table-column
          prop="createTime"
          label="预警时间"
        > </el-table-column>
        <el-table-column
          prop="objectCode"
          label="医废编号"
          show-overflow-tooltip
        > </el-table-column>
        <el-table-column
          prop="hospitalPlaceName"
          label="医废暂存点"
        >
        </el-table-column>
        <el-table-column
          prop="type"
          width="220"
          label="预警类型"
        >
          <template slot-scope="scope">
            {{scope.row.type | filter_alarm_type}}
          </template>
        </el-table-column>
        <el-table-column
          prop="hospitalDepartName"
          label="科室"
        >
        </el-table-column>

        <el-table-column
          prop="status"
          width="100"
          label="状态"
        >
          <template slot-scope="scope">
            {{
            scope.row.status == 'wait'?'待处理':'已处理'
          }}
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="100"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              v-if="scope.row.status == 'wait'"
              @click.stop="handleAdd('edit',scope.row)"
            >处理</el-button>
            <el-button
              type="text"
              v-if="scope.row.status == 'done'"
              @click.stop="handleEdit('view',scope.row)"
            >查看</el-button>
          </template>
        </el-table-column>
      </PageTable>
    </PageCard>
    <Child
      ref="child"
      @getDataList="handleSearch(currentPage,pageSize)"
    ></Child>
    <ChooseRole
      ref="chooseRole"
      @getDataList="handleSearch(currentPage,pageSize)"
    ></ChooseRole>

    <ChildBox
      ref="childBox"
      @getDataList="handleSearch(currentPage,pageSize)"
    ></ChildBox>
    <ChooseRoleBox
      ref="chooseRoleBox"
      @getDataList="handleSearch(currentPage,pageSize)"
    ></ChooseRoleBox>
  </div>
</template>

<script>
import PageTable from "@/components/PageTable";
import PageCard from "@/components/PageCard";
import child from "./components/child.vue";
import chooseRole from "./components/chooseRole.vue";
import childBox from "./components/childBox.vue";
import chooseRoleBox from "./components/chooseRoleBox.vue";
import { hospitalDepartList } from "@/api/hospitalDepart.js";
import * as alarmRecordApi from "@/api/alarmRecord";
import { settings } from "nprogress";
import * as Utils from "@/utils";
import { ASYNC_SEARCH } from "@riophae/vue-treeselect";
export default {
  name: "Users",
  components: {
    PageTable: PageTable,
    PageCard: PageCard,
    Child: child,
    ChooseRole: chooseRole,
    ChildBox: childBox,
    ChooseRoleBox: chooseRoleBox,
  },
  data() {
    return {
      formData: {
        type: "",
        warnTimeEnd: "",
        warnTimeStart: "",
        time: "",
        hospitalDepartId: null,
      },
      currentPage: 1,
      pageSize: 10,
      total: 0,
      data: [],
      multipleTable: [], //批量选择
      departmentList: [], //科室列表
      alarmTypeList: [], //预警类型枚举值
    };
  },
  created() {
    this.handleSearch(1, 10);
    this.handleHospitalDepartList(); //获取科室列表
    this.handleGetalarmTypeList(); //获取预警类型枚举值
  },
  methods: {
    async loadOptions({ action, searchQuery, callback }) {
      let _this = this;
      if (action === ASYNC_SEARCH) {
        let res = await hospitalDepartList({
          isPage: false,
          name: searchQuery,
        });
        if (res && res.success) {
          let departmentList = res.data.map((item) => {
            item.label = item.name;
            return item;
          });
          this.departmentList = Utils.treeDataTranslate(departmentList);
          callback(null, this.departmentList);
        }
      }
    },
    //获取科室列表
    handleHospitalDepartList() {
      hospitalDepartList({ isPage: false }).then((res) => {
        if (res && res.success) {
          let departmentList = res.data.map((item) => {
            item.label = item.name;
            return item;
          });
          this.departmentList = Utils.treeDataTranslate(departmentList);
        }
      });
    },
    //获取预警类型枚举值
    handleGetalarmTypeList() {
      alarmRecordApi.getListByType({ type: "warn_classify" }).then((res) => {
        if (res && res.success) {
          this.alarmTypeList = res.data;
        }
      });
    },
    // 查询
    handleSearch(current, limit) {
      this.currentPage = current;
      this.pageSize = limit;
      if (this.formData.time) {
        this.formData.warnTimeEnd = this.formData.time[1];
        this.formData.warnTimeStart = this.formData.time[0];
      }
      let query = {
        type: this.formData.type,
        warnTimeEnd: this.formData.warnTimeEnd,
        warnTimeStart: this.formData.warnTimeStart,
        hospitalDepartId: this.formData.hospitalDepartId,
      };
      const params = {
        ...query,
        pageIndex: current || 1,
        pageSize: limit || 10,
      };
      // 调接口查询
      this.handleGetDataList(params);
    },
    //获取列表数据
    handleGetDataList(params) {
      alarmRecordApi.warnBaseList(params).then((res) => {
        if (res && res.success) {
          this.data = res.data;
          this.total = res.total;
        }
      });
    },
    // 重置
    handleReset() {
      this.$refs["searchForm"].resetFields();
    },
    handleAdd(_type, row) {
      if (row.objectType == "waste" || row.objectType == "depart") {
        //医废
        this.$refs.child.showModal("edit", row);
      } else {
        console.log(this.$refs.childBox);
        this.$refs.childBox.showModal("edit", row);
      }
    },
    handleEdit(_type, row) {
      if (row.objectType == "waste" || row.objectType == "depart") {
        this.$refs.chooseRole.showModal("view", row);
      } else {
        this.$refs.chooseRoleBox.showModal("view", row);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.account-container {
  .btns {
    text-align: right;
  }
}
::v-deep .vue-treeselect__control {
  height: 32px;
  line-height: 32px;
}

::v-deep .vue-treeselect__placeholder,
::v-deep .vue-treeselect__single-value {
  line-height: 32px;
}
</style>
